<template>
  <view>
    <view class="content">
      <view class="row">
        <view class="nominal">收件人</view>
        <view class="input">
          <input placeholder="请输入收件人姓名" type="text" v-model="name" />
        </view>
      </view>
      <view class="row">
        <view class="nominal">电话号码</view>
        <view class="input">
          <input placeholder="请输入收件人电话号码"   type="text" v-model="tel" />
        </view>
      </view>
      <view class="row">
        <view class="nominal">所在地区</view>
        <view class="input" @tap="chooseCity">{{region.label}}</view>
      </view>
      <view class="row">
        <view class="nominal">详细地址</view>
        <view class="input">
          <textarea  v-model="detailed" auto-height="true" placeholder="输入详细地址"></textarea>
        </view>
      </view>
      <view class="row">
        <view class="nominal">设置默认地址</view>
        <view class="input switch">
          <switch color="#354E44" :checked="isDefault" @change="isDefaultChange" />
        </view>
      </view>
      <view class="row last" v-if="editType" @tap="del">
        <view class="del">删除收货地址</view>
      </view>
    </view>
    <view class="save" @tap="save1">
      <view class="btn">保存地址</view>
    </view>
	<simple-address ref="simpleAddressCom" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
   
  </view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import WxValidate from "@/utils/validate.js";
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import {
		findAllAddress,
		updateAddressInfo,
		addAddressInfo,
		switchDefault,
		delAddressInfo
	} from "@/api/address/index.js";
	const simpleAddressCom = ref(null)
	const cityPickerValueDefault = ref([0, 0, 1])
	const editType = ref(false)
	const id = ref("")
	const name = ref("")
	const tel = ref("")
	const detailed = ref("")
	const isDefault = ref(false)
	const cityPickerValue = ref([0,0,0])
	const addressid = ref("")
	const themeColor = ref("#007AFF")
	const region = ref({ label: "请点击选择地址", value: [], cityCode: "" })
	const address = ref({})
	const addressInfo = ref({})
	const currentError = ref("")
	const WxValidateObj = ref(null)
	const onCancel = (e) =>{}
	const chooseCity = () =>{
		simpleAddressCom.value.open()
	}
	const onConfirm = (e) => {
	  region.value.cityCode = `${e.provinceCode}-${e.cityCode}-${e.areaCode}`;
	  region.value.label = e.labelArr.join("-");
	  region.value.value = e.labelArr;
    }
	const isDefaultChange = async (e) => {
      isDefault.value = e.detail.value;
	  if(editType.value){
		  const res = await switchDefault(addressid.value,e.detail.value == true?1:0)
		  if(res.success == true){
			  uni.showToast({
				title:"切换默认成功",
				icon:"none"
			  })
		  }
	  }
    }
	const del = () => {
      uni.showModal({
        title: "删除提示",
        content: "你将删除这个收货地址",
        success: res => {
          if (res.confirm) {
            // 发送请求删除地址
			delAddressInfo(addressInfo.value.id)
			.then(res =>{
				if(res.success == true){
					uni.showToast({
						title:"删除成功"
					});
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1000)
				}
			})
          } else if (res.cancel) {
          }
        }
      });
    }
	const save1 = () => {
		const obj = {		
		  "city": region.value.value[1],
		  "cityCode": region.value.cityCode,
		  "defaultStatus": isDefault.value ? 1 : 0,
		  "detailAddress": detailed.value,
		  "name": name.value,
		  "phoneNumber": tel.value,
		  "postCode": "",
		  "province":region.value.value[0],
		  "region": region.value.value[2],
		  "tag": ""
		};
		if (!WxValidateObj.value.checkForm(obj)) {
		  //表单元素验证不通过，此处给出相应提示
			let error = WxValidateObj.value.errorList[0];
			uni.showToast({
				title:error.msg,
				icon:"none"
			})
			return false;
		}else{
			uni.showLoading({
			  title: "正在提交"
			});
			
			if(editType.value){ // 编辑
				obj.memberId = addressInfo.value.memberId;
				obj.id = addressInfo.value.id
				updateAddressInfo(obj)
				.then(res =>{
					if(res.success == true){
						uni.showToast({
							title:"更新成功"
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			}else{ // 新增
				addAddressInfo(obj)	
				.then(res =>{
					if(res.success == true){
						uni.showToast({
							title:"添加成功"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			}
		}
	}
	const getAddressById = async (id) => {
		const res = await findAllAddress()
		var info = res.data.items.find(ele =>ele.id == id);
		console.log("info==>",info);
		// index 为获取的地址组件所回显时的默认地址下标
		// var index = simpleAddressCom.value.queryIndex(info.cityCode.split("-"), 'value');
		// cityPickerValueDefault.value = index.index;
		addressInfo.value = info;
		name.value = info.name;
		tel.value = info.phoneNumber;
		region.value = {
			cityCode:info.cityCode,
			label:`${info.province}-${info.city}-${info.region}`,
			value:[info.province,info.city,info.region]
		};
		detailed.value = info.detailAddress;
		isDefault.value = info.defaultStatus ? true : false;
	}
	const initValidate = () => {
		let rules = {
		  name: {
			required: true,
			rangelength: [2,4]
		  },
		  phoneNumber: {
			required: true,
			tel: true
		  },
		  detailAddress:{
			  required: true
		  }
		}

		let message = {
		  name: {
			required: '请输入收件人姓名',
			maxlength: '收件人名称长度为2-4'
		  },
		  phoneNumber: {
			required: "请输入收件人电话号码",
			tel: "收件人电话号码格式不正确"
		  },
		  detailAddress:{
			  required: "请填写收件人详细地址"
		  }
		}
		//实例化当前的验证规则和提示消息
		WxValidateObj.value = new WxValidate(rules, message);
	  }
	 onLoad((e)=>{
		 // 如果有addressId 说明是编辑
		 if(e.addressId){
			editType.value = true;
			addressid.value = e.addressId;
			getAddressById(e.addressId);
		 }else{
			editType.value = false
		 }
		 // 表单验证插件
		 // https://www.cnblogs.com/zhangxiaoyong/p/10166951.html
		 initValidate();
	 })
</script>
<style lang="scss" scoped>
	.red{
		color: red!important;
	}
.save {
  view {
    display: flex;
  }
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 120upx;
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
    width: 70%;
    height: 80upx;
    border-radius: 80upx;
    background-color: #354E44;
    color: #fff;
    justify-content: center;
    align-items: center;
    .icon {
      height: 80upx;
      color: #fff;
      font-size: 30upx;
      justify-content: center;
      align-items: center;
    }
    font-size: 30upx;
  }
}
.content {
  display: flex;
  flex-wrap: wrap;
  view {
    display: flex;
  }
  .row {
    width: 94%;

    margin: 0 3%;
    border-bottom: 1Px solid #ccc;
    .nominal {
      width: 30%;
      height: 120upx;
      font-weight: 200;
      font-size: 30upx;
      align-items: center;
    }
    .input {
      width: 70%;
      padding: 20upx 0;
      align-items: center;
      font-size: 30upx;
      &.switch {
        justify-content: flex-end;
      }
      .textarea {
        margin: 20upx 0;
        min-height: 120upx;
      }
    }
    .del {
      width: 100%;
      height: 100upx;
      justify-content: center;
	  margin-top: 60rpx;
      align-items: center;
      font-size: 36upx;
      color: #fff;
      background-color: #E64340;
      border-bottom: solid 1upx #eee;
    }
  }
  .last{
	  border-bottom: 0;
  }
}
</style>
